<template>
	<view class="">
		<u-navbar back-text="" back-icon-size="40" :height="height" :back-icon-name="backIconName"
			:title-color="titleColor" :background="background" :border-bottom="borderBottom"
			:back-icon-color="backIconColor" :title="Title">
			<view class="menu-box">
				<view class="right" v-if="isShowR"  hover-class="hover">
					<image class="img1" @click="search()" src="@/static/img/index/zxIcon1.png" alt="" />
					<image class="img2" @click="shaixuan()" src="@/static/img/index/zxIcon2.png" alt="" />
					<!-- <image class="img1" src="@/static/img/index/zxIcon1.png" alt="" /> -->
					<!-- <image class="img2" src="@/static/img/index/zxIcon2.png" alt="" /> -->
				</view>
			</view>
		</u-navbar>
	</view>

</template>

<script>
	export default {
		name: "view-head",
		props: {
			// 标题
			Title: {
			  type: String,
			  default: '详情',
			},
			Mode:{
						type: String,
						default: 'date',  
			},
			showWeek:Boolean,
			background:{
				type: Object,
				default() {
				  return {
					  backgroundColor:'#fff'
				  };
				},
			},
			height:{
			  type:String,
			  default:'50'
			},
			titleColor:{
				type:String,
				default:'#000'
			},
			backIconName:{
				type:String,
				default:'arrow-leftward'
			},
			backIconColor:{
				type:String,
				default:'#000'
			},
			borderBottom:{
				type:Boolean,
				default:true
			},
			isShowR: {
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				title: '',
			};
		},
		methods: {
			back() {
				// uni.navigateBack(-1)
				uni.navigateBack({
					delta: 1
				})
			},
			search() {
				uni.navigateTo({
					url: '/pages/comA/zhixin/search'
				})
			},
			shaixuan() {
				uni.navigateTo({
					url: '/pages/comA/zhixin/history'
				})
			},
		},
		mounted() {
			this.title = this.Title
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-title{
		font-size: 34rpx !important;
		font-family: $uni-font-family-Bold;
	}
	/deep/.u-navbar-inner{
		align-items: flex-start;
	}
	/deep/.u-back-wrap{
		background: url(@/static/img/common/topBack.png) no-repeat center / 40rpx 40rpx;
		padding: 30rpx;
	}
	/deep/.u-icon-wrap{
		opacity: 0;
		// padding-left: 30rpx;
	}
	.menu-box {
		
		.nav {
			padding: 0 30rpx 0 30rpx;
			height: 100rpx;
			position: relative;
		}

		.back {
			position: absolute;
			top: 50%;
			left: 30rpx;
			transform: translateY(-50%);

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.right {
			background-color: #fff;
			border-radius: 6rpx;
			margin: 0 0 0 auto;
			position: absolute;
			top: 50%;
			right: 30rpx;
			transform: translateY(-50%);

			.img1 {
				width: 36rpx;
				height: 36rpx;
				display: inline-block;
				vertical-align: middle;
			}

			.img2 {
				width: 32rpx;
				height: 32rpx;
				margin-left: 40rpx;
				display: inline-block;
				vertical-align: middle;
			}
		}

		.hover {
			background-color: #F2F6FE;
		}

		.title-box {
			text-align: center;
			margin: 0 auto;

			.time {
				font-size: 28rpx;
				font-family: $uni-font-family-Medium;
				color: #000;
			}
		}

		.title {
			font-size: 36rpx;
			font-family: $uni-font-family-Bold;
			color: #000;
			// padding-left: 40rpx;
			// margin: 0 auto;
		}

	}

	.nav-box2 {
		position: relative;
		// margin-bottom: 60rpx;
	}
</style>